2 вересня 2025 р.Українська

Дізнайтеся про експериментальний хук experimental_useFormStatus в React для оптимізації керування станом форм. Вивчіть реалізацію, переваги та розширене використання на реальних прикладах.

Реалізація experimental_useFormStatus в React: Покращене керування станом форми

Ландшафт React, що постійно розвивається, представляє інструменти та техніки для покращення досвіду розробників та продуктивності додатків. Однією з таких експериментальних функцій є хук experimental_useFormStatus, розроблений для спрощення керування станом форми, особливо в сценаріях із серверними діями та прогресивним поліпшенням. Цей вичерпний посібник детально розгляне хук experimental_useFormStatus, надаючи практичні приклади та поради для його ефективного використання.

Що таке `experimental_useFormStatus`?

Хук experimental_useFormStatus — це експериментальний API, представлений командою React, щоб забезпечити простіший спосіб відстеження статусу відправки форми, особливо при використанні серверних дій. До появи цього хука керування різними станами форми (очікування, відправка, успіх, помилка) часто вимагало складної логіки керування станом. experimental_useFormStatus має на меті абстрагувати більшу частину цієї складності, надаючи простий та ефективний спосіб моніторингу та реагування на стани відправки форми.

Ключові переваги:

Спрощене керування станом: Зменшує шаблонний код, необхідний для керування станами відправки форми.
Покращений досвід користувача: Дозволяє створювати більш чутливі оновлення UI на основі статусу форми.
Покращена читабельність коду: Робить код, пов'язаний з формами, легшим для розуміння та підтримки.
Безшовна інтеграція з серверними діями: Розроблено для особливо ефективної роботи з серверними компонентами React та серверними діями.

Базова реалізація

Щоб проілюструвати базову реалізацію experimental_useFormStatus, розглянемо простий приклад контактної форми. Ця форма збиратиме ім'я, електронну пошту та повідомлення користувача, а потім відправлятиме їх за допомогою серверної дії.

Передумови

Перш ніж зануритися в код, переконайтеся, що у вас налаштований проєкт React із наступним:

Версія React, що підтримує експериментальні API (перевірте документацію React для необхідної версії).
Увімкнені серверні компоненти React (зазвичай використовуються у фреймворках, таких як Next.js або Remix).

Приклад: Проста контактна форма

Ось базовий компонент контактної форми:

```jsx // app/actions.js (Серверна дія) 'use server' export async function submitContactForm(formData) { // Симуляція виклику до бази даних або API-запиту await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'Всі поля є обов\'язковими.' }; } try { // Замініть на реальний виклик API або операцію з базою даних console.log('Форму відправлено:', { name, email, message }); return { success: true, message: 'Форму успішно відправлено!' }; } catch (error) { console.error('Помилка при відправці форми:', error); return { success: false, message: 'Не вдалося відправити форму.' }; } } // app/components/ContactForm.jsx (Клієнтський компонент) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Ім'я:

Email:

Повідомлення:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>Пояснення</h3>

<ul>
  <li><b>Серверна дія (<code>app/actions.js</code>):</b> Цей файл визначає функцію <code>submitContactForm</code>, яка є серверною дією. Вона симулює API-запит із 2-секундною затримкою, щоб продемонструвати асинхронний характер відправки форми. Також вона обробляє базову валідацію та помилки.</li>
  <li><b>Клієнтський компонент (<code>app/components/ContactForm.jsx</code>):</b> Цей файл визначає компонент <code>ContactForm</code>, який є клієнтським компонентом. Він імпортує хук <code>experimental_useFormStatus</code> та дію <code>submitContactForm</code>.</li>
  <li><b>Використання <code>useFormStatus</code>:</b> У компоненті <code>SubmitButton</code> викликається <code>useFormStatus</code>. Цей хук надає інформацію про статус відправки форми.</li>
  <li><b>Властивість <code>pending</code>:</b> Властивість <code>pending</code>, що повертається <code>useFormStatus</code>, вказує, чи форма зараз відправляється. Вона використовується для деактивації кнопки відправки та відображення повідомлення "Відправка...".</li>
  <li><b>Прив'язка форми:</b> Атрибут <code>action</code> елемента <code>form</code> прив'язаний до серверної дії <code>submitContactForm</code>. Це повідомляє React, що потрібно викликати серверну дію при відправці форми.</li>
</ul>

<h2>Розширене використання та міркування</h2>

<h3>Обробка станів успіху та помилки</h3>

<p>Хоча <code>experimental_useFormStatus</code> спрощує відстеження статусу відправки, часто потрібно явно обробляти стани успіху та помилки. Серверні дії можуть повертати дані, що вказують на успіх чи невдачу, які ви можете використовувати для відповідного оновлення UI.</p>

<p><b>Приклад:</b></p>

```jsx
// app/components/ContactForm.jsx (Змінено)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Відправка...' : 'Відправити'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Ім'я:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Повідомлення:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Пояснення:</b></p>

<ul>
  <li><b>Стан для повідомлень:</b> Введено змінну стану <code>message</code> для зберігання результату, повернутого серверною дією.</li>
  <li><b>Обробка результату:</b> Після відправки форми функція <code>handleSubmit</code> оновлює стан <code>message</code> результатом із серверної дії.</li>
  <li><b>Відображення повідомлень:</b> Компонент відображає повідомлення на основі властивості <code>success</code> результату, застосовуючи різні CSS-класи для станів успіху та помилки.</li>
</ul>

<h3>Прогресивне поліпшення</h3>

<p><code>experimental_useFormStatus</code> чудово проявляє себе в сценаріях прогресивного поліпшення. Прогресивно покращуючи стандартну HTML-форму за допомогою React, ви можете забезпечити кращий досвід користувача, не жертвуючи базовою функціональністю, якщо JavaScript не спрацює.</p>

<p><b>Приклад:</b></p>

<p>Почнемо з базової HTML-форми:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Ім'я:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Повідомлення:</label>
    <textarea id="message" name="message" required>

```

Потім ви можете прогресивно поліпшити її за допомогою React та experimental_useFormStatus.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Використовуйте null як початковий стан, якщо не покладаєтеся на нього return (

Ім'я:

Email:

Повідомлення:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>Пояснення:</b></p>

<ul>
  <li><b>Початкова HTML-форма:</b> Файл <code>public/contact.html</code> містить стандартну HTML-форму, яка працюватиме навіть без JavaScript.</li>
  <li><b>Прогресивне поліпшення:</b> Компонент <code>EnhancedContactForm</code> прогресивно покращує HTML-форму. Якщо JavaScript увімкнено, React бере керування на себе і забезпечує багатший досвід користувача.</li>
  <li><b>Хук <code>useFormState</code>:</b> Використовує <code>useFormState</code> для керування станом форми та прив'язки серверної дії до форми.</li>
	<li><b><code>state</code>:</b> <code>state</code> з <code>useFormState</code> тепер містить значення, повернуте серверною дією, яке можна перевірити на наявність повідомлень про успіх або помилку.</li>
</ul>

<h3>Міжнародні аспекти</h3>

<p>При реалізації форм для глобальної аудиторії виникає кілька міжнародних аспектів:</p>

<ul>
  <li><b>Локалізація:</b> Переконайтеся, що ваші мітки форм, повідомлення та повідомлення про помилки локалізовані різними мовами. Інструменти, такі як i18next, можуть допомогти керувати перекладами.</li>
  <li><b>Формати дати та чисел:</b> Обробляйте формати дати та чисел відповідно до локалі користувача. Використовуйте бібліотеки, такі як <code>Intl</code> або <code>moment.js</code> (для форматування дати, хоча зараз вона вважається застарілою), щоб правильно форматувати дати та числа.</li>
  <li><b>Формати адрес:</b> Різні країни мають різні формати адрес. Розгляньте можливість використання бібліотеки, яка підтримує кілька форматів адрес, або створення власних полів форми на основі місцезнаходження користувача.</li>
  <li><b>Валідація номерів телефонів:</b> Валідуйте номери телефонів відповідно до міжнародних стандартів. Бібліотеки, такі як <code>libphonenumber-js</code>, можуть допомогти в цьому.</li>
  <li><b>Підтримка письма справа наліво (RTL):</b> Переконайтеся, що макет вашої форми підтримує RTL-мови, такі як арабська або іврит. Використовуйте логічні властивості CSS (наприклад, <code>margin-inline-start</code> замість <code>margin-left</code>) для кращої підтримки RTL.</li>
  <li><b>Доступність:</b> Дотримуйтесь рекомендацій щодо доступності (WCAG), щоб ваші форми були зручними для використання людьми з обмеженими можливостями, незалежно від їхнього місцезнаходження.</li>
</ul>

<p><b>Приклад: Локалізовані мітки форми</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/uk.json
{
  "contactForm": {
    "nameLabel": "Ім'я",
    "emailLabel": "Email",
    "messageLabel": "Повідомлення",
    "submitButton": "Відправити",
    "successMessage": "Форму успішно відправлено!",
    "errorMessage": "Не вдалося відправити форму."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Пояснення:</b></p>

<ul>
  <li><b>Файли перекладу:</b> Приклад використовує <code>react-i18next</code> для керування перекладами. Окремі JSON-файли містять переклади для різних мов.</li>
  <li><b>Хук <code>useTranslation</code>:</b> Хук <code>useTranslation</code> надає доступ до функції перекладу (<code>t</code>), яка використовується для отримання локалізованих рядків.</li>
  <li><b>Локалізовані мітки:</b> Мітки форми та текст кнопки отримуються за допомогою функції <code>t</code>, що забезпечує їх відображення мовою, яку обрав користувач.</li>
</ul>

<h3>Аспекти доступності</h3>

<p>Важливо забезпечити доступність ваших форм для всіх користувачів, включно з тими, хто має обмежені можливості. Ось кілька ключових аспектів доступності:</p>

<ul>
  <li><b>Семантичний HTML:</b> Правильно використовуйте семантичні елементи HTML, такі як <code><label></code>, <code><input></code>, <code><textarea></code> та <code><button></code>.</li>
  <li><b>Мітки:</b> Пов'язуйте мітки з елементами керування форми за допомогою атрибута <code>for</code> на <code><label></code> та атрибута <code>id</code> на елементі керування.</li>
  <li><b>Атрибути ARIA:</b> Використовуйте атрибути ARIA для надання додаткової інформації допоміжним технологіям. Наприклад, використовуйте <code>aria-describedby</code> для зв'язку елемента керування з описом.</li>
  <li><b>Обробка помилок:</b> Чітко вказуйте на помилки та надавайте корисні повідомлення про них. Використовуйте атрибути ARIA, такі як <code>aria-invalid</code>, щоб позначити недійсні елементи керування.</li>
  <li><b>Навігація з клавіатури:</b> Переконайтеся, що користувачі можуть переміщатися по формі за допомогою клавіатури. Використовуйте атрибут <code>tabindex</code> для керування порядком фокусування, якщо це необхідно.</li>
  <li><b>Контраст кольорів:</b> Забезпечте достатній контраст кольорів між текстом та фоном.</li>
  <li><b>Структура форми:</b> Використовуйте чітку та послідовну структуру форми. Групуйте пов'язані елементи керування за допомогою елементів <code><fieldset></code> та <code><legend></code>.</li>
</ul>

<p><b>Приклад: Доступна обробка помилок</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Відправка...' : 'Відправити'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Базова валідація на стороні клієнта
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Ім\'я є обов\'язковим.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'Email є обов\'язковим.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Повідомлення є обов\'язковим.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Очистити попередні помилки
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Ім'я:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Повідомлення:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Пояснення:</b></p>

<ul>
  <li><b>Стан помилок:</b> Компонент підтримує стан <code>errors</code> для відстеження помилок валідації.</li>
  <li><b>Валідація на стороні клієнта:</b> Функція <code>handleSubmit</code> виконує базову валідацію на стороні клієнта перед відправкою форми.</li>
  <li><b>Атрибути ARIA:</b> Атрибут <code>aria-invalid</code> встановлюється в <code>true</code>, якщо є помилка для конкретного елемента керування. Атрибут <code>aria-describedby</code> пов'язує елемент керування з повідомленням про помилку.</li>
  <li><b>Повідомлення про помилки:</b> Повідомлення про помилки відображаються поруч із відповідними елементами керування.</li>
</ul>

<h2>Потенційні виклики та обмеження</h2>

<ul>
  <li><b>Експериментальний статус:</b> Оскільки це експериментальний API, <code>experimental_useFormStatus</code> може бути змінений або видалений у майбутніх версіях React. Важливо стежити за документацією React і бути готовим адаптувати свій код за потреби.</li>
  <li><b>Обмежена сфера застосування:</b> Хук в основному зосереджений на відстеженні статусу відправки і не надає комплексних функцій керування формами, таких як валідація або обробка даних. Вам все ще може знадобитися реалізувати додаткову логіку для цих аспектів.</li>
  <li><b>Залежність від серверних дій:</b> Хук розроблений для роботи з серверними діями, що може не підходити для всіх випадків використання. Якщо ви не використовуєте серверні дії, вам може знадобитися знайти альтернативні рішення для керування станом форми.</li>
</ul>

<h2>Висновок</h2>

<p>Хук <code>experimental_useFormStatus</code> пропонує значне покращення в керуванні станами відправки форми в React, особливо при роботі з серверними діями та прогресивним поліпшенням. Спрощуючи керування станом та надаючи чіткий і лаконічний API, він покращує як досвід розробника, так і досвід користувача. Однак, враховуючи його експериментальний характер, важливо бути в курсі оновлень та можливих змін у майбутніх версіях React. Розуміючи його переваги, обмеження та найкращі практики, ви зможете ефективно використовувати <code>experimental_useFormStatus</code> для створення більш надійних та зручних для користувача форм у ваших додатках на React. Не забувайте враховувати найкращі практики інтернаціоналізації та доступності для створення інклюзивних форм для глобальної аудиторії.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">стан форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">форми в React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">експериментальний API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">хуки React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">відправка форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">асинхронні форми</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">прогресивне поліпшення</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>

Реалізація experimental_useFormStatus в React: Покращене керування станом форми

Що таке experimental_useFormStatus?

Базова реалізація

Передумови

Приклад: Проста контактна форма

Що таке `experimental_useFormStatus`?